<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			img {
				position: absolute;
				width: 400px;
			}

			#money {
				z-index: 1;
			}


		</style>
	</head>
	<body>

		<img src="money.jpg" alt="" id="money">

		
	</body>
</html>
<script>
	// 获取元素
	var money = document.getElementById('money');

	// 点击事件
	money.onclick = function(e) {

		var x = e.clientX - money.offsetLeft;
		var y = e.clientY - money.offsetTop;

		// 鼠标移动事件
		document.onmousemove = function(e) {

			var left = e.clientX - x;
			var top = e.clientY - y;

			// 改变钱的位置
			money.style.left = left + 'px';
			money.style.top = top + 'px';
		};

		document.onmouseup = function(e) {

			// 创建元素, 拼接到body中
			var img = document.createElement('img');
			img.src = "money.jpg";

			var left = e.clientX - x;
			var top = e.clientY - y;

			img.style.left = left + 'px';
			img.style.top = top + 'px';



			document.body.appendChild(img);

		};

	};

	document.oncontextmenu = function(e) {

		this.onmousemove = null;
		this.onmouseup = null;

		money.style.top = 0;
		money.style.left = 0;

		// 阻止网页的默认行为
		e.preventDefault();

	};






</script>







